<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能监测系统 - 监测维护记录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        secondary: '#64748b'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            min-height: 1024px;
        }

        .chart-container {
            width: 100%;
            height: 300px;
        }

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
</head>

<body class="bg-gray-50">
    <div class="fixed top-0 left-0 w-full bg-white shadow-sm z-50" style="position: sticky;">
        <div class="container flex items-center justify-between h-16 px-6" style="margin-left: 50px;">
            <div class="flex items-center space-x-2">
                <span class="text-2xl font-['Pacifico'] text-primary">logo</span>
                <span class="text-xl font-medium">隧道监测系统</span>
            </div>
            <div class="flex items-center space-x-6">
                <button
                    class="flex items-center space-x-1 text-gray-600 hover:text-primary!rounded-button whitespace-nowrap">
                    <i class="fas fa-bell w-4 h-4 flex items-center justify-center"></i>
                    <span>通知</span>
                </button>
                <button
                    class="flex items-center space-x-1 text-gray-600 hover:text-primary!rounded-button whitespace-nowrap">
                    <i class="fas fa-cog w-4 h-4 flex items-center justify-center"></i>
                    <span>设置</span>
                </button>
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
                        <i class="fas fa-user text-gray-600"></i>
                    </div>
                    <span class="text-gray-700">管理员</span>
                </div>
            </div>
        </div>
    </div>
    <div class="flex min-h-screen">
        <div class="w-48 min-h-[calc(100vh-64px)] bg-white shadow-sm pt-6" style="margin-left: 55px;">
            <div class="px-4 py-2">
                <div class="text-sm font-medium text-gray-400">主导航</div>
                <div class="mt-2 space-y-1">
                    <a style="line-height: 50px;" href="./index1.html"
                        class="w-full px-3 py-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-exclamation-triangle mr-2"></i>数据采集监测
                    </a>
                    <a style="line-height: 50px;" href="./index2.html"
                        class="w-full px-3 py-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-ambulance mr-2"></i>风险评估分析
                    </a>
                    <a style="line-height: 50px;" href="./index3.html"
                        class="w-full px-3 py-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-chart-line mr-2"></i>应急响应方案
                    </a>
                    <a style="line-height: 50px;" href="./index4.html"
                        class="w-full px-3 py-2 text-sm text-left text-primary bg-blue-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-clipboard-list mr-2"></i>监测维护记录
                    </a>
                </div>
            </div>
        </div>

        <main class="flex-1 p-8">


            <section class="mb-8">
                <div class="grid grid-cols-4 gap-6">
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">本周监测次数</h3>
                            <span class="px-3 py-1 text-sm font-medium bg-green-100 text-green-600 rounded-full">25
                                次</span>
                        </div>
                        <div class="text-3xl font-bold text-gray-900">25</div>
                        <p class="mt-2 text-sm text-gray-500">较上周增加 5 次</p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">维护任务完成率</h3>
                            <i class="fas fa-check-circle text-green-500"></i>
                        </div>
                        <div class="text-3xl font-bold text-gray-900">95%</div>
                        <p class="mt-2 text-sm text-gray-500">剩余任务 2 个</p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">故障处理时长</h3>
                            <i class="fas fa-stopwatch text-orange-500"></i>
                        </div>
                        <div class="text-3xl font-bold text-gray-900">3.5 小时</div>
                        <p class="mt-2 text-sm text-gray-500">平均每次故障处理 21 分钟</p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">设备正常运行率</h3>
                            <i class="fas fa-heartbeat text-blue-500"></i>
                        </div>
                        <div class="text-3xl font-bold text-gray-900">98%</div>
                        <p class="mt-2 text-sm text-gray-500">较上月提升 2%</p>
                    </div>
                </div>
            </section>

            <section class="grid grid-cols-2 gap-6 mb-8">
                <div class="bg-white p-6 rounded-lg shadow-sm">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-medium text-gray-800">监测次数趋势</h3>
                        <div class="flex space-x-2">
                            <button id="monitoringTodayBtn" class="px-4 py-2 border border-gray-300 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50">
                                今天
                            </button>
                            <button id="monitoringYesterdayBtn" class="px-4 py-2 border border-gray-300 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50">
                                昨天
                            </button>
                        </div>
                    </div>
                    <div id="monitoringTrendChart" class="chart-container"></div>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-sm">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-medium text-gray-800">维护任务类型分布</h3>
                        <div class="flex space-x-2">
                            <button id="maintenanceTodayBtn" class="px-4 py-2 border border-gray-300 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50">
                                今天
                            </button>
                            <button id="maintenanceYesterdayBtn" class="px-4 py-2 border border-gray-300 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50">
                                昨天
                            </button>
                        </div>
                    </div>
                    <div id="maintenanceTaskDistChart" class="chart-container"></div>
                </div>
            </section>

            <!-- 其他部分保持不变 -->
        </main>
    </div>

    <script>
        // 初始化 ECharts 实例
        const monitoringTrendChart = echarts.init(document.getElementById('monitoringTrendChart'));
        const maintenanceTaskDistChart = echarts.init(document.getElementById('maintenanceTaskDistChart'));

        // 定义“监测次数趋势”数据
        const monitoringTodayData = [5, 4, 6, 7, 8, 3, 9]; // 今天的数据
        const monitoringYesterdayData = [3, 5, 4, 6, 7, 5, 8]; // 昨天的数据

        // 定义“维护任务类型分布”数据
        const maintenanceTodayData = [
            { value: 40, name: '硬件维护' },
            { value: 30, name: '软件维护' },
            { value: 20, name: '清洁保养' },
            { value: 10, name: '其他' }
        ];
        const maintenanceYesterdayData = [
            { value: 35, name: '硬件维护' },
            { value: 25, name: '软件维护' },
            { value: 25, name: '清洁保养' },
            { value: 15, name: '其他' }
        ];

        // 默认显示“今天”的数据
        const monitoringTrendOption = {
            animation: false,
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '监测次数',
                type: 'line',
                smooth: true,
                data: monitoringTodayData,
                areaStyle: {
                    opacity: 0.1
                },
                lineStyle: {
                    color: '#2563eb'
                },
                itemStyle: {
                    color: '#2563eb'
                }
            }]
        };
        monitoringTrendChart.setOption(monitoringTrendOption);

        const maintenanceTaskDistOption = {
            animation: false,
            tooltip: {
                trigger: 'item'
            },
            series: [{
                name: '维护任务分布',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '14',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: maintenanceTodayData
            }]
        };
        maintenanceTaskDistChart.setOption(maintenanceTaskDistOption);

        // 切换按钮事件
        document.getElementById('monitoringTodayBtn').addEventListener('click', () => {
            monitoringTrendOption.series[0].data = monitoringTodayData;
            monitoringTrendChart.setOption(monitoringTrendOption);
        });

        document.getElementById('monitoringYesterdayBtn').addEventListener('click', () => {
            monitoringTrendOption.series[0].data = monitoringYesterdayData;
            monitoringTrendChart.setOption(monitoringTrendOption);
        });

        document.getElementById('maintenanceTodayBtn').addEventListener('click', () => {
            maintenanceTaskDistOption.series[0].data = maintenanceTodayData;
            maintenanceTaskDistChart.setOption(maintenanceTaskDistOption);
        });

        document.getElementById('maintenanceYesterdayBtn').addEventListener('click', () => {
            maintenanceTaskDistOption.series[0].data = maintenanceYesterdayData;
            maintenanceTaskDistChart.setOption(maintenanceTaskDistOption);
        });

        // 窗口大小调整时重新渲染图表
        window.addEventListener('resize', function () {
            monitoringTrendChart.resize();
            maintenanceTaskDistChart.resize();
        });
    </script>
</body>

</html>